/*
 * @Author: yehongbo 1394168736@qq.com
 * @Date: 2024-09-18 19:15:13
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-09-18 19:16:29
 * @FilePath: \myWorkspace\react-basic\src\components\form\parent.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// 列表和键Key是React中列表项的一种特殊属性。当项目被更新、删除或添加时, 它充当每个项目的唯一标识符。不建议将项目的索引作为Key, 因为如果项目重新排序, 它将影响预期的行为。想象一下, 在购物车中你添加了10个项目, 每个项目都有一个唯一的索引作为Key。现在, 你决定从购物车中删除第一个和第五个项目。当项目被删除时, 索引将发生变化; 第二个项目将成为第一个, 第六个项目将成为第五个。列表和键的示例const fruits = ["苹果", "香蕉", "橙子"];

function FruitList() {
    return (
        <ul>
            {fruits.map((fruit, index) => (
                <li key={index}> {fruit} </li>
            ))}
        </ul>
    );
}
// 注意: 建议使用唯一标识列表中项目的字符串作为Key。第三方库如UUID提供创建唯一键的功能。表单: 受控组件和非受控组件React表单允许比传统HTML表单更好地收集和管理用户输入。这些表单使用组件构建, 并将用户输入存储到state中。有两种类型的组件: 受控组件
// 在受控组件中, 表单的状态由组件自身管理。这是在React中管理表单数据的推荐方法。当用户与表单交互时(例如, 在输入字段中输入), 组件的状态会更新以反映变化。受控组件示例
function ControlledInput() {
    const [name, setName] = useState('');

    const handleChange = (e) => {
        setName(e.target.value);
    }

    return (
        <div>
            <label htmlFor="name">名字: </label>
            <input type="text" id="name" value={name} onChange={handleChange} />
            <p>你的名字是: {name}</p>
        </div>
    );
}
// 非受控组件
// 非受控组件依赖DOM来管理表单数据。组件不直接控制表单的状态, 但可以使用DOM方法(如ref)访问值。非受控组件示例
function UncontrolledInput() {
    const nameRef = useRef(null);

    const handleClick = () => {
        console.log(nameRef.current.value);
    }

    return (
        <div>
            <label htmlFor="name">名字: </label>
            <input type="text" id="name" ref={nameRef} />
            <button onClick={handleClick}>获取名字</button>
        </div>
    );
}
// 注意: 受控组件提供表单验证, 因为由于使用state, 用户的输入立即反映。非受控组件无法进行表单验证, 因为只有在表单提交后才能访问用户的输入。